<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('逾期管理')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>逾期借阅管理</h2>
                <div>
                    <a th:href="@{/loans/admin/all-loans}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-list me-1"></i> 所有借阅
                    </a>
                    <a th:href="@{/dashboard}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> 返回仪表盘
                    </a>
                </div>
            </div>
            
            <!-- 逾期借阅列表 -->
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">逾期未归还图书</h5>
                        <span class="badge bg-light text-danger" th:text="${totalItems} + ' 条记录'">0 条记录</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户</th>
                                    <th>图书</th>
                                    <th>借阅日期</th>
                                    <th>应还日期</th>
                                    <th>逾期天数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="loan : ${loans}">
                                    <td th:text="${loan.id}">1</td>
                                    <td>
                                        <a th:href="@{/admin/users/{id}(id=${loan.user.id})}" class="text-decoration-none">
                                            <span th:text="${loan.user.name}">用户名</span>
                                            <small class="d-block text-muted" th:text="${loan.user.email}">user@example.com</small>
                                        </a>
                                    </td>
                                    <td>
                                        <a th:href="@{/books/view/{id}(id=${loan.book.id})}" class="text-decoration-none">
                                            <span th:text="${loan.book.title}">图书标题</span>
                                            <small class="d-block text-muted" th:text="${'作者: ' + loan.book.author}">作者</small>
                                        </a>
                                    </td>
                                    <td th:text="${#temporals.format(loan.borrowDate, 'yyyy-MM-dd')}">2023-01-01</td>
                                    <td th:text="${#temporals.format(loan.dueDate, 'yyyy-MM-dd')}">2023-02-01</td>
                                    <td>
                                        <span class="badge bg-danger" th:text="${T(java.time.temporal.ChronoUnit).DAYS.between(loan.dueDate, T(java.time.LocalDate).now()) + ' 天'}">10 天</span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-success" data-bs-toggle="modal" th:data-bs-target="'#returnModal-' + ${loan.id}">
                                                <i class="fas fa-undo me-1"></i> 归还
                                            </button>
                                            <button class="btn btn-warning" data-bs-toggle="modal" th:data-bs-target="'#notifyModal-' + ${loan.id}">
                                                <i class="fas fa-bell me-1"></i> 提醒
                                            </button>
                                        </div>
                                        
                                        <!-- 归还确认模态框 -->
                                        <div class="modal fade" th:id="'returnModal-' + ${loan.id}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">确认归还</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>确认图书 <strong th:text="${loan.book.title}">图书标题</strong> 已归还?</p>
                                                        <div class="alert alert-warning">
                                                            <i class="fas fa-exclamation-triangle me-2"></i>
                                                            此借阅已逾期 <strong th:text="${T(java.time.temporal.ChronoUnit).DAYS.between(loan.dueDate, T(java.time.LocalDate).now()) + ' 天'}">10</strong>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <form th:action="@{/loans/admin/return}" method="post">
                                                            <input type="hidden" name="loanId" th:value="${loan.id}">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                            <button type="submit" class="btn btn-success">确认归还</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 提醒用户模态框 -->
                                        <div class="modal fade" th:id="'notifyModal-' + ${loan.id}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">发送提醒</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>向 <strong th:text="${loan.user.name}">用户名</strong> 发送逾期提醒:</p>
                                                        <div class="mb-3">
                                                            <label for="notifyMessage" class="form-label">提醒内容</label>
                                                            <textarea class="form-control" id="notifyMessage" rows="3" 
                                                                      th:text="'尊敬的用户，您借阅的《' + ${loan.book.title} + '》已逾期' + ${T(java.time.temporal.ChronoUnit).DAYS.between(loan.dueDate, T(java.time.LocalDate).now())} + '天，请尽快归还。'"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">发送提醒</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr th:if="${#lists.isEmpty(loans)}">
                                    <td colspan="7" class="text-center py-4">
                                        <div class="alert alert-success mb-0">
                                            <i class="fas fa-check-circle me-2"></i> 目前没有逾期借阅记录
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
